<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" http-equiv="Content-Type" content="width=device-width, initial-scale=1" charset=utf-8>
	<title>Itinéraire</title>
	<!-- Chargement de la bibliothèque JQuery -->
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
	
	<style>
		.page-map, .ui-content, #map { width: 100%; height: 100%; padding: 0;}
		 html, body { height: 100%; } 
 		#map { height:100%; min-height: 100%; }  
	</style>
	
	</head>

<body>
	
	<div data-role="page" id="page1" class="page-map">

		<div data-role="header">
	    	<a href="index.html" data-icon="home" data-transition="pop" data-theme="b" >Home</a>
	    		<h1>Itinéraire</h1>
	    </div>

    	<div data-role="content">
    		<div id="map"></div>
    	</div>

	      
  		<div data-role="footer" data-position="fixed">
			<div class="ui-block-a">
				<form action="" method="get" name="direction" id="direction">
				<input id="destination" name="destination" class="ui-input-text" placeholder="Destination">
				</form>
			</div>	 
			<div class="ui-block-b"><button type="submit" data-mini="true" data-inline="true" data-theme="b" onclick="javascript:Itineraire()">Envoyer</button></div>
		</div>
		
    </div>

	<!-- API Google maps -->
	<script>
	// Position par défaut
	var centerpos = new google.maps.LatLng(43.605256,1.442986);

	// Options pour la carte, centrée sur centerpos
	var optionsGmaps = {
		center:centerpos,
		navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		zoom: 15
	};
	
	var directionsService = new google.maps.DirectionsService();

	// Initialisation de la carte avec les options
	var map = new google.maps.Map(document.getElementById("map"), optionsGmaps);
	
	if(navigator.geolocation) {

	// Fonction de callback en cas de succès
		function affichePosition(position) {

			// On instancie un nouvel objet LatLng pour Google Maps
			var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

			// Ajout d'un marqueur à la position trouvée
			var marker = new google.maps.Marker({
				position: latlng,
				map: map,
				title:"Vous êtes ici"
			});
			
			//on centre la carte sur la position			
			map.panTo(latlng);
		
		}

		// Fonction de callback pour gérer les erreurs
		function erreurPosition(error) {
			var info = "Erreur lors de la géolocalisation : ";
			switch(error.code) {
			case error.TIMEOUT:
				info += "Timeout !";
			break;
			case error.PERMISSION_DENIED:
				info += "Vous n’avez pas donné la permission";
			break;
			case error.POSITION_UNAVAILABLE:
				info += "La position n’a pu être déterminée";
			break;
			case error.UNKNOWN_ERROR:
				info += "Erreur inconnue";
			break;
			}
			document.getElementById("maposition").innerHTML = info;
	}

	navigator.geolocation.getCurrentPosition(affichePosition,erreurPosition);

	} else {alert("Ce navigateur ne supporte pas la géolocalisation");
			}

			
// Fonction lancée avec le bouton pour calculer l'itinéraire			
function Itineraire() {
		
	if(document.getElementById('destination').value == "")
	{ alert("Il faut renseigner une destination !!  ");}
	else
	{
		
		if(navigator.geolocation) {

		// Fonction de callback en cas de succès
		function affichePosition(position) {
	
			// On instancie un nouvel objet LatLng pour Google Maps
			var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

			// Ajout d'un marqueur à la position trouvée
			var marker = new google.maps.Marker({
				position: latlng,
				map: map,
				title:"Vous êtes ici"
			});

			//calcul de l'itinéraire depuis les coordonnées de Géolocalisation de la variable latlng
			// et du champ destination du formulaire de saisie.....//
				
			var directionsService = new google.maps.DirectionsService();
			var directionsDisplay = new google.maps.DirectionsRenderer({ 'map': map });
			var request = {
				  origin     : latlng,
				  destination: document.getElementById('destination').value,
				  travelMode : google.maps.DirectionsTravelMode.DRIVING,
				  unitSystem: google.maps.DirectionsUnitSystem.METRIC
				};		
				directionsService.route(request, function(response, status) {
				  if (status == google.maps.DirectionsStatus.OK) {
					directionsDisplay.setDirections(response);
					directionsDisplay.suppressMarkers = true;
				  }
				});	
		
		}

		// Fonction de callback pour gérer les erreurs
		function erreurPosition(error) {
			var info = "Erreur lors de la géolocalisation : ";
			switch(error.code) {
			case error.TIMEOUT:
				info += "Timeout !";
			break;
			case error.PERMISSION_DENIED:
				info += "Vous n’avez pas donné la permission";
			break;
			case error.POSITION_UNAVAILABLE:
				info += "La position n’a pu être déterminée";
			break;
			case error.UNKNOWN_ERROR:
				info += "Erreur inconnue";
			break;
			}
			document.getElementById("maposition").innerHTML = info;
	}

	navigator.geolocation.getCurrentPosition(affichePosition,erreurPosition);

	} else {alert("Ce navigateur ne supporte pas la géolocalisation");
			}
}}			
			
</script>

</body>
</html>